<template>
  <border class="rental-income-trend"
          :moduleType="borderConfig.moduleType"
          :icon="borderConfig.icon"
          :titleText="borderConfig.titleText"
          :organType="borderConfig.organType"
          :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content"
         slot="module-content">
      <div class="module-content-l">
        <div class="u-message">
          <message v-for="(item, index) in messageLeft"
                   :key="index"
                   :messageName="item.messageName"
                   :messageNumber="item.messageNumber"
                   :messageUnit="item.messageUnit"></message>
        </div>
        <div class="u-title">收缴率</div>
        <div class="u-chart">
          <barLine ref="pie"
                   :tooltip="moduleConfig.optionsConfigPie.tooltip"
                   :title="moduleConfig.optionsConfigPie.title"
                   :seriesData="moduleConfig.optionsConfigPie.series"
                   colorType="pie"></barLine>
        </div>
      </div>
      <div class="module-content-r">
        <div class="u-chart">
          <barLine ref="barLine"
                   :tooltip="moduleConfig.optionsConfig.tooltip"
                   :legend="moduleConfig.optionsConfig.legend"
                   :xAxis="moduleConfig.optionsConfig.xAxis"
                   :yAxis="moduleConfig.optionsConfig.yAxis"
                   :seriesData="moduleConfig.optionsConfig.series"></barLine>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../../components/Border.vue'
import Message from './../../assetsManagement/components/Message.vue'
import barLine from './../../assetsManagement/components/BarLine.vue'
export default {
  name: 'currentYearLeaseTrend',
  components: {
    Border,
    Message,
    barLine
  },
  data () {
    return {
      borderConfig: {
        moduleType: '2x1',
        icon: '',
        titleText: '租金收入趋势'
      },
      moduleConfig: {
        optionsConfigPie: {
          tooltip: {
            trigger: 'item'
          },
          title: {
            text: '',
            top: 'center'
          },
          series: []
        },
        optionsConfig: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['去年收入', '今年收入', '同比']
          },
          xAxis: [{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          }],
          yAxis: [{
            name: '价值(万元)',
            type: 'value'
          }, {
            name: '(%)',
            type: 'value',
            splitLine: {
              show: false
            }
          }],
          series: []
        }
      },
      messageLeft: [{
        messageName: '累计应收租金收入(万元)',
        messageNumber: 0,
        messageUnit: ''
      },
      {
        messageName: '累计实收租金(万元)',
        messageNumber: 0,
        messageUnit: ''
      }]
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    }
  },
  methods: {
    getData () {
      let self = this
      // let res = {
      //   data: {
      //     "code": "0",
      //     "msg": "查询成功!",
      //     "data":{
      //       "totalIncome":1000, // "实际累计收入",
      //       "totalPlanIncome": 2000, // "累计应收",
      //       "totalCollectionRate":"0.8012",
      //       "resultList":[{
      //         "id":"",
      //         "name":"1月",
      //         "monthValue1": 100, // "本月",
      //         "monthValue2": 60, // "去年同月",
      //         "yearOnYear": 0.88, // "同比"
      //       }, {
      //         "id":"",
      //         "name":"2月",
      //         "monthValue1": 10,
      //         "monthValue2": 20,
      //         "yearOnYear": 0.8,
      //       }]
      //     }
      //   }
      // }
      self.assetsManagementApi.incomeChange({ organId: self.organId }).then(res => {
        if (res.data.code === '0') {
          let resData = res.data.data || {}
          self.messageLeft[0].messageNumber = resData.totalPlanIncome
          self.messageLeft[1].messageNumber = resData.totalIncome
          self.moduleConfig.optionsConfigPie.title.text = resData.totalCollectionRate + '%'
          self.moduleConfig.optionsConfigPie.series = []
          let seriesData = []
          seriesData.push({ value: resData.totalCollectionRate, name: '' })
          if (Number(resData.totalCollectionRate) < 100) {
            seriesData.push({ value: 100 - Number(resData.totalCollectionRate), name: '' })
          }
          self.moduleConfig.optionsConfigPie.series = [{
            name: '收缴率',
            type: 'pie',
            radius: ['70%', '90%'],
            legendHoverLink: false,
            hoverAnimation: false,
            hoverOffset: 0,
            selectedOffset: 0,
            startAngle: 90,
            silent: true,
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: seriesData
          }]
          let xAxis = []
          let monthValue1 = []
          let monthValue2 = []
          let yearOnYear = []
          let resultList = resData.resultList || []
          let maxId = resultList.length > 0 ? (resultList[resultList.length - 1].id || 0) : 0
          let maxMonth = new Date().getMonth() + 1
          maxId = maxId < maxMonth ? maxMonth : maxId
          for (let i = 0; i < maxId; i++) {
            xAxis.push((i + 1) + '月')
            monthValue1.push('')
            monthValue2.push('')
            yearOnYear.push('')
          }
          resultList.forEach(v => {
            if (v.id) {
              // xAxis.push(v.name || '')
              monthValue1[v.id - 1] = v.monthValue1
              monthValue2[v.id - 1] = v.monthValue2
              yearOnYear[v.id - 1] = v.yearOnYear
            }
          })
          self.moduleConfig.optionsConfig.xAxis[0].data = xAxis
          self.moduleConfig.optionsConfig.series = []
          self.moduleConfig.optionsConfig.series = [{
            name: '去年收入',
            type: 'bar',
            data: monthValue2
          }, {
            name: '今年收入',
            type: 'bar',
            data: monthValue1
          }, {
            name: '同比',
            type: 'line',
            yAxisIndex: 1,
            data: yearOnYear
          }]
        } else {
          self.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, res => {
        self.$parent.showTips('请求失败，点击确认继续刷新')
      })
    }
  },
  mounted () {
    // this.getData()
  }
}
</script>

<style lang="scss" scoped>
.rental-income-trend {
  .module-content {
    width: 100%;
    height: 100%;

    &:after {
      content: ".";
      display: block;
      clear: both;
      height: 0;
      line-height: 0;
      font-size: 0;
    }

    .module-content-l {
      float: left;
      width: 39%;
      padding-left: 1%;
      overflow: hidden;
      height: 100%;
      > .u-message {
        float: left;
        width: 100%;

        .message {
          width: calc((100% - 20px) / 2);
          margin: 5px;
          float: left;
        }
      }
      > .u-title {
        float: left;
        width: 100%;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
      }
      > .u-chart {
        float: left;
        width: 100%;
        height: calc(100% - 120px);
      }
    }

    .module-content-r {
      float: left;
      width: 60%;
      height: 100%;

      > .u-chart {
        float: left;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
